<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>欢迎页面</title>
	<link rel="stylesheet" href="../libs/layui/css/layui.css">
	<link rel="stylesheet" href="../css/panel.css">
</head>
<body class="layui-box">
	<div class="layui-tab layui-tab-card css-noMargin">
		<ul class="layui-tab-title">
			<li class="layui-this">卡片&amp;栅格排版</li>
			<li>手风琴</li>
			<li>折叠式</li>
		</ul>
		<div class="layui-tab-content" style="background-color: #DEE;">
			<!-- tab页内容 -->
			<div class="layui-tab-item layui-show">
				<!-- 第一种排版 -->
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md12">
						<div class="layui-card">
							<div class="layui-card-header">
								header: 可以在头部添置按钮组
								<div class="layui-btn-group layui-layout-right" style="margin-right: 10px">
									<button class="layui-btn layui-btn-primary layui-btn-sm">
										<i class="layui-icon">&#xe654;</i>
									</button>
									<button class="layui-btn layui-btn-primary layui-btn-sm">
										<i class="layui-icon">&#xe642;</i>
									</button>
									<button class="layui-btn layui-btn-primary layui-btn-sm">
										<i class="layui-icon">&#xe640;</i>
									</button>
								</div>
							</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
							</div>
						</div>
					</div>
				</div>
				<!-- 第二种排版 -->
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md3">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，卡片式面板面板通常用于非白色背景色的主体内<br>
								从而映衬出边框投影
							</div>
						</div>
					</div>
					<div class="layui-col-md6">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，卡片式面板面板通常用于非白色背景色的主体内<br>
								从而映衬出边框投影
							</div>
						</div>
					</div>
					<div class="layui-col-md3">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，卡片式面板面板通常用于非白色背景色的主体内<br>
								从而映衬出边框投影
							</div>
						</div>
					</div>
				</div>
				<!-- 第三种排版 -->
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md4">
						<div class="layui-card" style="height: 415px;">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用先分大列，再分小行的排版方式<br>
								需要计算元素的高度手动调整height对齐<br>
								如果使用卡片面板则还需要注意margin-bottom的值
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<div class="layui-card" style="height: 270px; margin-bottom: 10px;">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用先分大列，再分小行的排版方式<br>
								需要计算元素的高度手动调整height对齐<br>
								如果使用卡片面板则还需要注意margin-bottom的值
							</div>
						</div>
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用先分大列，再分小行的排版方式<br>
								需要计算元素的高度手动调整height对齐<br>
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<div class="layui-card" style="margin-bottom: 10px;">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用先分大列，再分小行的排版方式<br>
								需要计算元素的高度手动调整height对齐<br>
							</div>
						</div>
						<div class="layui-card" style="height: 270px;">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用先分大列，再分小行的排版方式<br>
								需要计算元素的高度手动调整height对齐<br>
								如果使用卡片面板则还需要注意margin-bottom的值
							</div>
						</div>
					</div>
				</div>
				<!-- 第四种排版 -->
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md4">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用偏移式排版
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用偏移式排版
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用偏移式排版
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md4 layui-col-md-offset4">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用偏移式排版
							</div>
						</div>
					</div>
					<div class="layui-col-md4">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用偏移式排版
							</div>
						</div>
					</div>
				</div>
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md4 layui-col-md-offset8">
						<div class="layui-card">
							<div class="layui-card-header">header: 卡片标题</div>
							<div class="layui-card-body">
								body: 卡片内容<br>
								注意，本段使用偏移式排版
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- tab页内容 -->
			<div class="layui-tab-item" style="background-color: #FFF;">
				<div class="layui-collapse">
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">杜甫</h2>
						<div class="layui-colla-content layui-show">默认展开: class="layui-show"</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">李清照</h2>
						<div class="layui-colla-content">内容区域</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">鲁迅</h2>
						<div class="layui-colla-content">内容区域</div>
					</div>
				</div>
			</div>
			<!-- tab页内容 -->
			<div class="layui-tab-item">
				<div class="layui-collapse" style="background-color: #FFF;" lay-accordion>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">杜甫</h2>
						<div class="layui-colla-content layui-show">
							默认展开: class="layui-show"<br>
							在父容器设置属性 lay-accordion 启用手风琴模式
						</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">李清照</h2>
						<div class="layui-colla-content">内容区域</div>
					</div>
					<div class="layui-colla-item">
						<h2 class="layui-colla-title">鲁迅</h2>
						<div class="layui-colla-content">内容区域</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../libs/layui/layui.js"></script>
	<script src="../js/panel.js"></script>
</body>
</html>
